<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="1"
                v-for="o in 10"
                :key="o">
          <el-button type="text">主要按钮{{o}}</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-input placeholder="请输入内容"
                    v-model="search"
                    class="input-with-select">
            <el-button slot="append"
                       icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="tableData"
              stripe
              border
              fit>
      <el-table-column v-for="field in columns"
                       :key="field.id"
                       :label="field.title"
                       :prop="field.field">
        <template slot-scope="scope">
          <div v-if="field.field == 'sex'">
            <span v-html="sexFormatter(scope.row.sex)"></span>
          </div>
          <div v-else-if="field.field == 'sections.code'">
            <span v-html="sameFormatter(scope.row.sections.code)"></span>
          </div>
          <div v-else-if="field.field == 'sections.name'">
            <span v-html="sameFormatter(scope.row.sections.name)"></span>
          </div>
          <div v-else-if="field.field == 'status'">
            <span v-html="statusFormatter(scope.row.status)"></span>
          </div>
          <div v-else-if="field.field == 'disablestatus'">
            <span v-html="disableStatusFormatter(scope.row.disablestatus)"></span>
          </div>
          <div v-else>
            {{ scope.row[scope.column.property] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      search: '',
      columns: [{
        field: 'code',
        title: '工号'
      }, {
        field: 'name',
        title: '姓名'
      }, {
        field: 'nickName',
        title: '昵称'
      }, {
        field: 'sex',
        title: '性别'
      }, {
        field: 'status',
        title: '状态'
      }, {
        field: 'disablestatus',
        title: '禁用状态'
      }, {
        field: 'sections.code',
        title: '部门编码'
      }, {
        field: 'sections.name',
        title: '部门名称'
      }],
      tableData: [],
      currentPage: 1,
      pageSizes: [100, 200, 300, 400],
      pageSize: 100
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    sexFormatter (cellValue) {
      return this.utils.sexFormatter(cellValue)
    },
    sameFormatter (code) {
      return this.utils.sameFormatter(code)
    },
    statusFormatter (status) {
      return this.utils.statusFormatter(status)
    },
    disableStatusFormatter (status) {
      return this.utils.disableStatusFormatter(status)
    }
  },
  async mounted () {
    console.log(this.$route.path)
    const { data: res } = await this.$http.get(this.$route.path, this.loginFrom)
    if (res.state) {
      this.tableData = res.data.rows
    }
  }
}
</script>
<style lang="less" scoped>
.el-col {
  margin: 0 10px;
}
</style>
